<template>
    <div class="operation">
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="right" class="conditions-form">
            <el-form-item label="站点" prop="station">
                <el-select v-model="ruleForm.station" placeholder="请选择" clearable>
                    <el-option label="全部" value=""></el-option>
                    <el-option label="电站1号" value="1"></el-option>
                    <el-option label="电站2号" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="工单状态" prop="workOrderStatus">
                <el-select v-model="ruleForm.workOrderStatus" placeholder="请选择" clearable>
                    <el-option label="全部" value=""></el-option>
                    <el-option label="待处理" value="1"></el-option>
                    <el-option label="处理中" value="2"></el-option>
                    <el-option label="已完成" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="工单类型" prop="workOrderType">
                <el-select v-model="ruleForm.workOrderType" placeholder="请选择" clearable>
                    <el-option label="全部" value=""></el-option>
                    <el-option label="故障工单" value="1"></el-option>
                    <el-option label="巡检工单" value="2"></el-option>
                    <el-option label="维护工单" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="工单来源" prop="workOrderSource">
                <el-select v-model="ruleForm.workOrderSource" placeholder="请选择" clearable>
                    <el-option label="全部" value=""></el-option>
                    <el-option label="APP" value="1"></el-option>
                    <el-option label="PC" value="2"></el-option>
                    <el-option label="微信" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                <el-button @click="submitForm(ruleFormRef)">
                    查询
                </el-button>
                <el-button type="primary" @click="createWorkOrder">创建工单</el-button>
            </el-form-item>
        </el-form>
        <el-table ref="tableRef" row-key="date" :data="tableData" stripe border>
            <el-table-column prop="stationName" label="站点名称" :filters="[
                { text: '电站1号', value: '电站1号' },
                { text: '电站2号', value: '电站2号' },
                { text: '电站3号', value: '电站3号' },
                { text: '电站4号', value: '电站4号' },
                { text: '电站5号', value: '电站5号' },
                { text: '电站6号', value: '电站6号' },
                { text: '电站7号', value: '电站7号' }
            ]" :filter-method="filterHandler" />
            <el-table-column prop="workOrderStatus" label="工单状态" :filters="[
                { text: '待处理', value: '待处理' },
                { text: '处理中', value: '处理中' },
                { text: '已完成', value: '已完成' }
            ]" :filter-method="filterHandler" />
            <el-table-column prop="workOrderType" label="工单类型" :filters="[
                { text: '故障工单', value: '故障工单' },
                { text: '巡检工单', value: '巡检工单' },
                { text: '维护工单', value: '维护工单' }
            ]" :filter-method="filterHandler" />
            <el-table-column prop="deviceName" label="设备名称" />
            <el-table-column prop="workOrderSource" label="工单来源" :filters="[
                { text: 'APP', value: 'APP' },
                { text: 'PC', value: 'PC' },
                { text: '微信', value: '微信' }
            ]" :filter-method="filterHandler" />
            <el-table-column prop="workOrderNumber" label="工单编号" />
            <el-table-column prop="expectTime" label="期望处理时间" :filters="[
                { text: '2021-08-10', value: '2021-08-10' }
            ]" :filter-method="filterHandler" />
            <el-table-column label="操作" width="280">
                <template #default="{ row }">
                    <el-button type="text">编辑</el-button>
                    <el-button type="text">详情</el-button>
                    <el-button type="text">处理</el-button>
                    <el-button type="text" style="color: red;">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" width="685">
            <template #header>创建工单</template>
            <template #default>
                <el-form ref="creatFormRef" :model="creatForm" label-width="right" class="dialogForm">
                    <div class="title">
                        <div class="line"></div>
                        <div class="text">工单信息</div>
                    </div>
                    <div class="cont">
                        <div class="item">
                            <el-form-item label="工单来源" prop="workOrderSource">
                                <el-select v-model="creatForm.workOrderSource" placeholder="请选择" clearable>
                                    <el-option label="APP" value="1"></el-option>
                                    <el-option label="PC" value="2"></el-option>
                                    <el-option label="微信" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="工单状态" prop="workOrderStatus">
                                <el-select v-model="creatForm.workOrderStatus" placeholder="请选择" clearable disabled>
                                    <el-option label="待处理" value="1"></el-option>
                                    <el-option label="处理中" value="2"></el-option>
                                    <el-option label="已完成" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="item">
                            <el-form-item label="站点名称" prop="stationName">
                                <el-select v-model="creatForm.stationName" placeholder="请选择" clearable>
                                    <el-option label="电站1号" value="1"></el-option>
                                    <el-option label="电站2号" value="2"></el-option>
                                    <el-option label="电站3号" value="3"></el-option>
                                    <el-option label="电站4号" value="4"></el-option>
                                    <el-option label="电站5号" value="5"></el-option>
                                    <el-option label="电站6号" value="6"></el-option>
                                    <el-option label="电站7号" value="7"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="联系人" prop="contact">
                                <el-input v-model="creatForm.contact" placeholder="请输入联系人"></el-input>
                            </el-form-item>
                        </div>
                        <div class="item">
                            <el-form-item label="工作类型" prop="workType">
                                <el-select v-model="creatForm.workType" placeholder="请选择" clearable>
                                    <el-option label="工作类型1" value="1"></el-option>
                                    <el-option label="工作类型2" value="2"></el-option>
                                    <el-option label="工作类型3" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="联系方式" prop="contactWay">
                                <el-input v-model="creatForm.contactWay" placeholder="请输入联系方式"></el-input>
                            </el-form-item>
                        </div>
                        <div class="item">
                            <el-form-item label="设备名称" prop="deviceName">
                                <el-select v-model="creatForm.deviceName" placeholder="请选择" clearable>
                                    <el-option label="设备1" value="1"></el-option>
                                    <el-option label="设备2" value="2"></el-option>
                                    <el-option label="设备3" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="期望处理时间" prop="expectTime">
                                <el-date-picker v-model="creatForm.expectTime" type="date"
                                    placeholder="选择日期"></el-date-picker>
                            </el-form-item>
                        </div>
                        <div class="item">
                            <el-form-item label="工单编号" prop="workOrderNumber">
                                <el-input v-model="creatForm.workOrderNumber" placeholder="请输入工单编号" disabled></el-input>
                            </el-form-item>
                        </div>
                        <div class="item">
                            <el-form-item label="工单内容" prop="workOrderContent" style="width: 100%">
                                <el-input v-model="creatForm.workOrderContent" type="textarea"
                                    placeholder="请输入工单内容"></el-input>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="title">
                        <div class="line"></div>
                        <div class="text">操作信息</div>
                    </div>
                    <div class="cont">
                        <div class="item">
                            <el-form-item label="创建人" prop="creator">
                                <el-input v-model="creatForm.creator" placeholder="请输入创建人" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="最近编辑人" prop="lastEditor">
                                <el-input v-model="creatForm.lastEditor" placeholder="请输入最近编辑人" disabled></el-input>
                            </el-form-item>
                        </div>
                        <div class="item">
                            <el-form-item label="创建时间" prop="createTime">
                                <el-date-picker v-model="creatForm.createTime" type="datetime"
                                    placeholder="选择日期时间" disabled></el-date-picker>
                            </el-form-item>
                            <el-form-item label="最近编辑时间" prop="lastEditTime">
                                <el-date-picker v-model="creatForm.lastEditTime" type="datetime"
                                    placeholder="选择日期时间" disabled></el-date-picker>
                            </el-form-item>
                        </div>
                    </div>
                </el-form>
            </template>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive,onMounted } from 'vue'
import type { TableColumnCtx, TableInstance, FormInstance } from 'element-plus'
import router from '@/router';

const dialogVisible = ref(false)
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    station: '',
    workOrderStatus: '',
    workOrderType: '',
    workOrderSource: ''
})
//工单来源、工单状态、站点名称、联系人、工作类型、联系方式、设备名称、期望处理时间、工单编号、工单内容、创建人、最近编辑人、创建时间、最近编辑时间
const creatForm = reactive({
    workOrderSource: '',
    workOrderStatus: '待执行（默认）',
    stationName: '',
    contact: '',
    workType: '',
    contactWay: '',
    deviceName: '',
    expectTime: '',
    workOrderNumber: '202409190823（自动生成）',
    workOrderContent: '',
    creator: '',
    lastEditor: '',
    createTime: '',
    lastEditTime: ''
})
const tableRef = ref<TableInstance>()
const creatFormRef = ref<FormInstance>()

const filterHandler = (
    value: string,
    row: any,
    column: TableColumnCtx<any>
) => {
    const property = column['property']
    return row[property] === value
}

//站点名称、工单状态、工单类型、设备名称、工单来源、工单编号、期望处理时间
const tableData = ref([
    { stationName: '电站1号', workOrderStatus: '待处理', workOrderType: '故障工单', deviceName: '设备1', workOrderSource: 'APP', workOrderNumber: '20210810001', expectTime: '2021-08-10' },
    { stationName: '电站2号', workOrderStatus: '处理中', workOrderType: '巡检工单', deviceName: '设备2', workOrderSource: 'PC', workOrderNumber: '20210810002', expectTime: '2021-08-10' },
    { stationName: '电站3号', workOrderStatus: '已完成', workOrderType: '维护工单', deviceName: '设备3', workOrderSource: '微信', workOrderNumber: '20210810003', expectTime: '2021-08-10' },
    { stationName: '电站4号', workOrderStatus: '待处理', workOrderType: '故障工单', deviceName: '设备4', workOrderSource: 'APP', workOrderNumber: '20210810004', expectTime: '2021-08-10' },
    { stationName: '电站5号', workOrderStatus: '处理中', workOrderType: '巡检工单', deviceName: '设备5', workOrderSource: 'PC', workOrderNumber: '20210810005', expectTime: '2021-08-10' },
    { stationName: '电站6号', workOrderStatus: '已完成', workOrderType: '维护工单', deviceName: '设备6', workOrderSource: '微信', workOrderNumber: '20210810006', expectTime: '2021-08-10' },
    { stationName: '电站7号', workOrderStatus: '待处理', workOrderType: '故障工单', deviceName: '设备7', workOrderSource: 'APP', workOrderNumber: '20210810007', expectTime: '2021-08-10' }
])
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
const createWorkOrder = () => {
    console.log('创建工单')
    dialogVisible.value = true
}

onMounted(() => {
    //获取url中ids参数
    const ids = router.currentRoute.value.query.ids
    console.log(ids)
    if(ids){
        dialogVisible.value = true
    }
});

</script>
<style lang="scss" scoped>
.operation {
    padding: 0 0.16rem 0.1rem;
    background: #fff;

    :deep(.conditions-form) {
        display: flex;
        padding: 0.12rem 0;

        .el-form-item {
            margin-bottom: 0;
            margin-right: 0.4rem;

            .el-form-item__label {
                padding-right: 4px;
                height: 0.4rem;
                line-height: 0.4rem;
                font-size: 0.16rem;
            }

            .el-form-item__content {
                height: 0.4rem;

                .el-select__wrapper {
                    width: 2rem;
                    height: 0.4rem;
                    font-size: 0.14rem;
                }

                .el-button {
                    height: 0.4rem;
                    line-height: 0.4rem;
                    font-size: 0.14rem;
                    color: #046AF9;
                    border-color: #046AF9;
                    background: #CDE1FE;
                }

                .el-button--primary {
                    background: #046AF9;
                    color: #fff;
                }

            }
        }

        .el-form-item:last-child {
            margin-left: auto;
            margin-right: 0;
        }
    }

    :deep(.el-dialog) {
        padding: 0;

        .el-dialog__header {
            border-bottom: 1px solid #E5E6EA;
            height: 46px;
            line-height: 46px;
            padding-left: 16px;
            font-size: 18px;
            font-weight: 500;
        }

        .el-dialog__body {
            padding: 12px 16px 24px;

            .dialogForm {
                .title {
                    display: flex;
                    align-items: center;
                    height: 40px;

                    .line {
                        width: 3px;
                        height: 16px;
                        background: #046AF9;
                        margin-right: 8px;
                        border-radius: 4px;
                        margin-left: 16px;
                    }

                    .text {
                        font-size: 16px;
                        font-weight: 500;
                    }
                }

                .cont {
                    padding: 0 24px;

                    .item {
                        display: flex;
                        justify-content: space-between;


                        .el-form-item {
                            margin-bottom: 12px;

                            .el-form-item__label {
                                padding-right: 4px;
                                line-height: 40px;
                                height: 40px;
                            }
                            .el-form-item__content{
                                width: 200px;
                            }

                            .el-select__wrapper,
                            .el-input__wrapper {
                                height: 40px;
                                width: 200px;
                                flex-grow: unset;
                            }

                            .el-date-editor.el-input {
                                width: auto
                            }
                        }

                        .el-form-item:first-child {
                            width: 272px;
                        }

                        .el-form-item:last-child {}

                    }
                }
            }
        }
        .el-dialog__footer {
            padding: 12px 16px 24px;
            text-align: right;

            .dialog-footer {
                .el-button {
                    margin-left: 12px;
                }
            }
        }
    }
}
</style>